*{
    box-sizing: border-box;
}

.slider{
    width: 600px;
    height: 40px;
    padding:10px;
}
.slider .bar{
    width: 580px;
    border:1px solid black; 
    height: 20px;
    border-radius: 10px;
    position: relative;
}

.slider .bar .dot{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: radial-gradient(white,black);
    position: absolute;
    top: -10px;
}